<template>
  <d2-container>
    <h3>{{$t('page.form.notice')}}</h3>
    <!--主列表数据-->
    <d2-crud
      ref="d2Crud"
      :options="mainTable.options"
      :index-row="mainTable.indexRow"
      :columns="mainTable.columns"
      :data="mainTable.list"
      :selection-row="mainTable.allowSelect"
      :loading="mainTable.loading"
      :rowHandle="mainTable.rowHandle"
      @current-change="onMainCurrentChange"
      @row-dblclick="onMainDoubleClick"
      @handle-set="show"
    ></d2-crud>

    <template slot="footer">
      <el-pagination
        @size-change="handleMainSizeChange"
        @current-change="handleMainPageChange"
        :current-page="mainTable.pagination.currentPage"
        :page-sizes="mainTable.pagination.pageSizes"
        :page-size="mainTable.pagination.pageSize"
        :page-count="mainTable.pagination.pageCount"
        :total="mainTable.pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        :background="true"
      >
      </el-pagination>
    </template>

    <notice-dialog
      ref="notice-dialog"
      @dialog-close="fetchMainData"
    ></notice-dialog>
  </d2-container>
</template>

<script>
import { mapState } from "vuex";
import { get } from "lodash";
import ApiMain from '@/api/system.bell';
import i18nTable from "@/mixins/i18n-table";
import noticeDialog from "../componts/noticeDialog";
export default {
  components: {
    noticeDialog,
  },
  mixins:[i18nTable ],
  data() {
    return {
      uploading: false,
      mainTable: {
        loading: false,
        options: {
          border: true,
          stripe: true,
          highlightCurrentRow: true,
          emptyText: this.$t('page-announcement.d2-crud.empty-data'),
          size: 'mini',
        },
        // indexRow: {
        //   title:this.$t('page.form.serialnumber'),
        //   width: "80",
        //   align:'center'
        // },
        indexRow: null, 
        allowSelect: false,
        columns: [
           { title: '公告标题', t: "page.form.announcementtitle", key: 'title', align: 'center', showOverflowTooltip: true },
          { title: '显示开始时间', t: "page.form.ShowStartTime", key: 'startTime', align: 'center', showOverflowTooltip: true, align: 'left' },
          { title: '显示结束时间', t: "page.form.displayendtime", key: 'endTime', align: 'center', showOverflowTooltip: true, align: 'left' },
          { title: '创建人', t: "page.form.creator", key: 'createBy', align: 'center', showOverflowTooltip: true, align: 'left' },
          { title: '创建时间', t: "page.form.creationTime", key: 'createTime', align: 'center', showOverflowTooltip: true },
        ],
        rowHandle: {
          width: '160',
          align: 'center',
          fixed: 'right',
           t: "page.form.operation",
          columnHeader: this.$t('page.form.operation'),
          custom: [
            {
              text: "查看详情",
              t:"page.form.viewDetails",
              type: 'primary',
              size: 'mini',
              emit: 'handle-set'
            },

          ]
        },
        list: [],
        pagination: {
          currentPage: 1,
          pageSize: 50,
          total: 0,
          pageSizes: [50, 100, 200]
        },
        current: null,
      },

    };
  },
  computed: {
    ...mapState("d2admin/log", ["log"]),
  },
  created() {
    this.resetMainData();
  },
  methods: {
    get,
    download() {

    },
    resetMainData() {
      this.fetchMainData();
    },
    handleMainSizeChange(val) {
      this.mainTable.pagination.pageSize = val;
      this.mainTable.pagination.currentPage = 1;
      this.fetchMainData()
    },
    handleMainPageChange(val) {
      this.mainTable.pagination.currentPage = val;
      this.fetchMainData()
    },

    async fetchMainData() {


      try {

        let re = await ApiMain.list({ page: 1, limit: 50 });
        this.renderMainData(re);

      } catch (err) {
        console.error(err);
      }

    },
    renderMainData(re) {
       this.mainTable.list = re.list;
      this.mainTable.pagination.total = re.total;
    },
    onMainCurrentChange(now, old) {
      this.mainTable.current = now;
    },

    onMainDoubleClick(now) {
      this.mainTable.current = now;
      this.handleSet();
    },

    show(item) {
      this.$refs["notice-dialog"].show(item.row);
    },
  },
};
</script>
